<template>
	<view class="wrap">
		<u-loading-page :loading="loading"></u-loading-page>
		<view v-if="!loading">
			<view class="header">
				<image src="@/static/bg_warning.png" mode="" v-if="expires(vehicleInfo.validPeriod)"></image>
				<image src="@/static/bg_success.png" mode="" v-else></image>
				<view class="flex">
					<text class="tips">车辆</text>
					<text class="plate">{{ vehicleInfo.manualPlateNum}}</text>
					<text class="tag" v-if="date.vehicleStatus == 1">黑名单</text>
				</view>
				<view class="type">{{vehicleInfo.typeName}}</view>
			</view>
			<view class="body">
				<view class="content">
					<view class="title">
						<view>行驶证信息</view>
						<view class="overdue" v-if="expires(vehicleInfo.validPeriod)">证件过期</view>
					</view>
					<view class="info">
						<view class="item">
							<view class="gray">车牌号：</view>
							<view class="black">
								<!-- <Plate :plate="vehicleInfo.manualPlateNum || vehicleInfo.plateNum"></Plate> -->
							</view>
						</view>
						<view class="item">
							<view class="gray">所有人：</view>
							<view class="black">{{vehicleInfo.owner}}</view>
						</view>
						<view class="item">
							<view class="gray">行驶证照片：</view>
							<view class="black" @click="photoInfo(0)">
								<view>已上传</view>
								<view class="check">点击查看</view>
							</view>
						</view>
						<view class="item">
							<view class="gray">车辆所属：</view>
							<view class="black" v-text="vehicleNatureText(vehicleInfo.vehicleNature)"></view>
						</view>
						<view v-show="showCard">
							<view class="item">
								<view class="gray">车牌颜色：</view>
								<view class="black" v-text="vehiclePlateText(vehicleInfo.plateColour)"></view>
							</view>
							<view class="item">
								<view class="gray">车辆类型：</view>
								<view class="black">{{vehicleInfo.typeName}}</view>
							</view>
							<view class="item">
								<view class="gray">车辆颜色：</view>
								<view class="black" v-text="vehicleColourText(vehicleInfo.vehicleColour)"></view>
							</view>
							<view class="item">
								<view class="gray">车辆能源类型：</view>
								<view class="black">{{vehicleInfo.vehicleEnergyType}}</view>
							</view>
							<!-- <view class="item">
								<view class="gray">排放标准：</view>
								<view class="black">{{	vehicleInfo.emissionStandard>0?typeEmission[vehicleInfo.emissionStandard-1].dicName:'' }}</view>
							</view> -->
							<view class="item">
								<view class="gray">排放标准：</view>
								<view class="black">{{	vehicleInfo.emissionStandard>0?typeEmission[vehicleInfo.emissionStandard-1].dicName:'' }}</view>
							</view>
							<view class="item">
								<view class="gray">强制报废期：</view>
								<view class="black">{{vehicleInfo.validPeriod}}</view>
							</view>
							<view class="item">
								<view class="gray">发证机关：</view>
								<view class="black">{{vehicleInfo.issuingOrganizations}}</view>
							</view>
							<view class="item">
								<view class="gray">车辆注册日期：</view>
								<view class="black">{{vehicleInfo.registerDate}}</view>
							</view>
							<view class="item">
								<view class="gray">车辆识别代号：</view>
								<view class="black">{{vehicleInfo.vin}}</view>
							</view>
							<view class="item">
								<view class="gray">车辆发证日期：</view>
								<view class="black">{{vehicleInfo.issueDate}}</view>
							</view>
						</view>
					</view>
					<view class="fold" @click="triggerShowCard">
						<view v-if="!showCard">
							<text style="margin-right: 12rpx;">展开全部</text>
							<u-icon name="arrow-down-fill" color="#9E9E9E" size="10"></u-icon>
						</view>
						<view v-else>
							<text style="margin-right: 12rpx;">收起全部</text>
							<u-icon name="arrow-up-fill" color="#9E9E9E" size="10"></u-icon>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="title">道路运输证信息</view>
					<view class="info">
						<view class="item">
							<view class="gray">道路运输证号：</view>
							<view class="black">{{vehicleInfo.rtcNo}}</view>
						</view>
						<view class="item">
							<view class="gray">道路运输证照片：</view>
							<view class="black" @click="photoInfo(1)">
								<view>已上传</view>
								<view class="check">点击查看</view>
							</view>
						</view>
					</view>
				</view>
				<!-- //暂时屏蔽 -->
				<!-- <view class="content"  v-if="vehicleInfo.isTractor">
					<view class="title">挂车行驶证信息</view>
					<view class="info">
						<view class="item">
							<view class="gray">挂车行驶证照片：</view>
							<view class="black" @click="photoInfo(2)">
								<view>已上传</view>
								<view class="check">点击查看</view>
							</view>
						</view>
						<view class="item">
							<view class="gray">挂车行驶证号码：</view>
							<view class="black">{{vehicleInfo.trailerInfo.plateNum}}</view>
						</view>
						<view class="item">
							<view class="gray">强制报废期：</view>
							<view class="black">{{vehicleInfo.trailerInfo.validPeriod}}</view>
						</view>
					</view>
				</view> -->
				
				<view class="content">
					<view class="title between">
						<view>已关联司机</view>
						<view class="set" @click="goRelation">
							<text style="margin-right: 6rpx;">管理</text>
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>
					</view>
					<view class="info">
						<view class="item" v-for="(item, index) in driverVehicle" :key="index">
							<view class="gray" v-text="item.isDefault == 1 ? '主驾司机：' : '副驾司机：'"></view>
							<view class="black">{{item.name}} | {{item.mobile}}</view>
						</view>
						<view class="empty" v-if="!driverVehicle.length">暂未关联司机</view>
					</view>
				</view>
				<view class="content">
					<view class="title">操作时间</view>
					<view class="info">
						<view class="item">
							<view class="gray">申请时间：</view>
							<view class="black">{{date.auditTime}}</view>
						</view>
						<view class="item">
							<view class="gray">审核通过时间：</view>
							<view class="black">{{date.auditTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer" v-if="expires(vehicleInfo.validPeriod)">
				<view class="submit" @click="goRegister">重新提交</view>
			</view>
			<view class="footer">
				<view v-if="date.vehicleStatus == 0" class="submit" @click="showAdd">设为黑名单</view>
				<view v-else class="submit" @click="showDelete">取消黑名单</view>
			</view>
			<u-modal :show="show" :content='content' showCancelButton closeOnClickOverlay @confirm="postBlacklist" @cancel="show=false" @close="show=false"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		vehicleInfo,
		queryDic,
		blacklistAdd,
		blacklistDelete
	} from '@/config/api/app.js'
	import Plate from '@/components/plate/plate.vue'
	export default {
		data() {
			return {
				loading: true,
				showCard: false,
				vehicleId: '',
				vehicleInfo: null,
				date: null,
				show: false,
				content: '',
				type: 0,
				driverVehicle: null,
				PLATE_COLOR: [],
				VEHICLE_COLOUR: [],
				VEHICLE_NATURE: [],
				status:null,
				typeEmission:[{'dicName':'国六',val: 1},{'dicName':'国五',val: 2},{'dicName':'国四',val: 3},{'dicName':'国三',val: 4},{'dicName':'新能源',val: 5}],
			}
		},
		async onLoad(options) {
			let info = JSON.parse(options.info)
			this.vehicleId = info.vehicleInfoId
			console.log(info)
			await this.getQueryDic()
			await this.getVehicleInfo()
		},
		onShow() {
			this.getVehicleInfo()
		},
		methods: {
			showAdd() {
				this.show = true
				this.content = '是否将该车辆加入黑名单'
				this.type = 0
			},
			showDelete() {
				this.show = true
				this.content = '是否将该车辆移除黑名单'
				this.type = 1
			},
			postBlacklist(type) {
				this.show = false
				this.type === 0 ? this.postBlacklistAdd() : this.postBlacklistDelete()
			},
			postBlacklistAdd() {
				let obj = {
					driverVehicleId: this.vehicleId,   //司机id或车辆id
					typeId: '2',  //id类型：1司机2车辆
				}
				blacklistAdd(obj, {
					custom: {
						title: '提交中……'
					}
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.$u.toast("添加成功");
						this.getVehicleInfo()
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			postBlacklistDelete() {
				let obj = {
					driverVehicleId: this.vehicleId,   //司机id或车辆id
					typeId: '2',  //id类型：1司机2车辆
				}
				blacklistDelete(obj, {
					custom: {
						title: '提交中……'
					}
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.$u.toast("移除成功");
						this.getVehicleInfo()
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//	车辆信息
			getVehicleInfo() {
				let params = {
					vehicleId: this.vehicleId
				}
				vehicleInfo({
					params: params
				}).then((res) => {
					if (res.code == 0) {
						console.log(res.data,11111111111)
						this.loading = false
						this.vehicleInfo = res.data.vehicleInfo
						this.date = res.data.dateMap
						this.driverVehicle = res.data.driverVehicle
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//	字典查询: 车轴 AXLE / 车牌颜色 PLATE_COLOR / 车辆颜色 VEHICLE_COLOUR / 车辆性质 VEHICLE_NATURE / 车辆类型 VAN_TYPE TRACTOR_TYPE
			getQueryDic() {
				queryDic(['VAN_TYPE', 'TRACTOR_TYPE', 'PLATE_COLOR', 'VEHICLE_COLOUR', 'VEHICLE_NATURE', 'AXLE'], {
					custom: {
						// title: '字典查询中……'
					}
				}).then(res => {
					// console.log(res)
					if (res.code != 0) {
						uni.$u.toast(res.msg);
					} else {
						this.VEHICLE_NATURE = res.data.VEHICLE_NATURE
						this.VEHICLE_COLOUR = res.data.VEHICLE_COLOUR
						this.PLATE_COLOR = res.data.PLATE_COLOR
					}
				}).catch(err => {
					console.log(err)
				})
			},
			photoInfo(num) {
				// 0是行驶证， 1道路运输证
				const {
					drivingLicense,
					vehicleLicenseDeputy,
					rtc,
					rtcDeputy,
					
				} = this.vehicleInfo
				const {
					pictureImg,
					pictureImgDeputy
				} = this.vehicleInfo.trailerInfo
				let urls = []
				if (num === 0) {
					if(drivingLicense) urls.push(drivingLicense)
					if(vehicleLicenseDeputy) urls.push(vehicleLicenseDeputy)
				}
				if (num === 1) {
					if(rtc) urls.push(rtc)
					if(rtcDeputy) urls.push(rtcDeputy)
				}
				if(num === 2){
					if(pictureImg) urls.push(pictureImg)
					if(pictureImgDeputy) urls.push(pictureImgDeputy)
				}
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: urls,
					success: () => {
						console.log('图片展示成功')
					}
				})
			},
			//	行驶证，从业资质图片是否有上传
			hasPhoto(front, reverse) {
				if (!front && !reverse) {
					return false
				} else {
					return true
				}
			},
			//	车辆颜色文字
			vehicleColourText(type) {
				if (!type) {
					return
				}
				let array = this.VEHICLE_COLOUR.filter(item => {
					return item.dicValue == type
				})
				if (array.length) return array[0].dicName
			},
			//	车牌颜色文字
			vehiclePlateText(type) {
				if (!type) {
					return
				}
				let array = this.PLATE_COLOR.filter(item => {
					return item.dicValue == type
				})
				if (array.length) return array[0].dicName
			},
			//	车辆类型文字
			vehicleNatureText(type) {
				if (!type) {
					return
				}
				let array = this.VEHICLE_NATURE.filter(item => {
					return item.dicValue == type
				})
				if (array.length) return array[0].dicName
			},
			//	是否过期
			expires(date) {
				if (!date) {
					return
				}
				let endDate = new Date(date)
				let currentDate = new Date()
				if (endDate > currentDate) {
					return false
				} else {
					return true
				}
			},
			triggerShowCard() {
				this.showCard = !this.showCard
			},
			goRegister() {
				uni.navigateTo({
					url: `/pages/vehicle/register?id=${this.vehicleId}`
				})
			},
			goRelation() {
				let data = {
					driverVehicle: this.driverVehicle,
					plateNum: this.vehicleInfo.plateNum,
					vehicleId: this.vehicleId
				}
				let list = JSON.stringify(data)
				uni.navigateTo({
					url: `./relation?data=${list}`
				})
			}
		},
		components: {
			Plate
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.body {
		padding: 0 32rpx;

		.content {
			padding: 0 32rpx;
			background: #fff;
			margin: 32rpx 0;
			border-radius: 10rpx;

			.info {
				padding: 12rpx 0;
			}

			.empty {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #9E9E9E;
				line-height: 66rpx;
			}

			.title {
				padding: 16rpx 0 16rpx 24rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #333;
				border-bottom: 1rpx solid #F5F7FB;
				position: relative;
				display: flex;
				align-items: center;

				.overdue {
					font-size: 22rpx;
					font-weight: 500;
					color: #FFFFFF;
					background: #8D090C;
					border-radius: 4rpx;
					padding: 6rpx 12rpx;
					margin-left: 12rpx;
				}

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 24rpx;
					width: 8rpx;
					height: 32rpx;
					background: #003E81;
				}
			}

			.between {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.set {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #9E9E9E;
					padding-left: 24rpx;
				}
			}

			.item {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				padding: 16rpx 0;
				font-size: 30rpx;

				.gray {
					font-weight: 400;
					color: #9E9E9E;
					width: 39%;
				}

				.black {
					width: 65%;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.check {
						font-size: 22rpx;
						font-weight: 500;
						color: #003E81;
						padding: 5rpx 10rpx;
						background: #F0F7FF;
						margin-left: 12rpx;
					}
				}
			}

			.fold>view {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #9E9E9E;
				padding: 20rpx 0;
				border-top: 1rpx solid #F5F7FB;
			}
		}
	}

	.header {
		position: relative;
		padding: 24rpx 60rpx;
		box-sizing: border-box;
		background: #fff;

		image {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 386rpx;
			height: 226rpx;
			zoom: .8;
		}

		.flex {
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		.tag{
			color: #fff;
			padding: 6rpx 20rpx;
			border-radius: 4rpx;
			background: #aaa;
			font-size: 24rpx;
			margin-left: 24rpx;
		}

		.tips {
			font-size: 26rpx;
			font-weight: 500;
			color: #E46F39;
			margin-right: 12rpx;
			padding: 6rpx 10rpx;
			background: #FFEBE1;
		}

		.plate {
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
		}

		.type {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
			margin-top: 20rpx;
		}
	}

	.footer {
		padding: 24rpx 50rpx;
		background: #fff;

		.submit {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}
	}
</style>
